<template>
    <div style="margin-top: 30px;">
        <el-card>
            <template v-slot:header>
                <div class="clearfix">
                    <span>第三方账号绑定</span>
                </div>
            </template>
            <div>
                <el-table :data="data" border stripe>
                    <el-table-column type="index" width="50" label="序号" align="center" />
                    <el-table-column label="三方平台" align="center" prop="provider" :show-overflow-tooltip="true">
                        <template #default="scope">
                            {{ scope.row.provider }}
                        </template>
                    </el-table-column>
                    <el-table-column label="头像" align="center" prop="avatarUrl" :show-overflow-tooltip="true">
                        <template #default="scope">
                            <el-avatar :size="30" :src="scope.row.avatarUrl" />
                        </template>
                    </el-table-column>
                    <el-table-column label="昵称" align="center" prop="nickName" :show-overflow-tooltip="true">
                        <template #default="scope">
                            <el-text type="info">{{ scope.row.nickName }}</el-text>
                        </template>
                    </el-table-column>
                    <el-table-column label="绑定时间" align="center" prop="createdAt" :show-overflow-tooltip="true">
                        <template #default="scope">
                            <span>{{ parseTime(scope.row.createdAt) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" :show-overflow-tooltip="true">
                        <template #default="scope">
                            <el-button type="primary" text @click="unBind(scope.row)">解除绑定</el-button>
                        </template>
                    </el-table-column>
                </el-table>


                <div class="external-accounts" style="padding-top: 30px ;">
                    <el-text class="mx-1" type="info">你还可以绑定以下第三方帐号</el-text>
                    <div>
                        <div class="external-account-item">
                            <!-- <svg-icon icon-class="github" /> -->
                            <!-- <i class="fa fa-music"></i>
                            <br> -->
                            <!-- <el-text type="info" @click="bindGitee">Gitee</el-text> -->
                            <el-button link @click="handleBind('Gitee')">Gitee</el-button>
                        </div>

                        <!-- <el-button type="primary" size="small" @click="bindGitee">Gitee</el-button> -->
                    </div>
                    <!-- <el-button type="primary" size="small" @click="bindWechat">微信</el-button>
                <el-button type="primary" size="small" @click="bindQQ">QQ</el-button>
                <el-button type="primary" size="small" @click="bindGithub">Github</el-button> -->
                </div>
            </div>
        </el-card>
    </div>
</template>
<script setup name="external">
import { getUserBinds, unbindUser } from "@/api/system/userprofile"
import { getAuthurl } from "@/api/oauth/socialoauth"
const { proxy } = getCurrentInstance()
const data = ref([]);
const getBindsList = () => {
    getUserBinds().then(res => {
        data.value = res;
    });
}

const handleBind = (provider) => {
    let callbackUrl = `/oauth/callback?op=bind&redirect_url=${encodeURIComponent("/user/profile")}&provider=${provider}`
    let params = { provider, redirectUrl: callbackUrl };
    getAuthurl(params).then(res => {
        window.location.href = res;
    })
    // TODO: Implement github login logic here
}

const unBind = (row) => {
    proxy.$modal.confirm("解绑后将无法在使用" + row.provider + "进行登录本账号")
        .then(() => unbindUser(row.id))
        .then(() => {
            getBindsList();
            proxy.$modal.msgSuccess("已解除绑定");
        })
        .catch(() => { });

}
const bindGitee = () => {

}
const bindWechat = () => {

}
const bindQQ = () => {

}

getBindsList();
</script>
<style lang="scss" scoped>
.external-accounts {
    .external-account-item {
        margin-top: 10px;
    }
}
</style>